<template>
    <!-- <van-swipe :autoplay="3000" lazy-render style="width:300px;"> -->
    <van-swipe :autoplay="3000" lazy-render vertical style="height: 200px;">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
  </template>
  
  <script setup>
  const images = [
    '/images/01.jpg',
    '/images/02.jpg',
    '/images/03.jpg',
    '/images/04.jpg'
  ]
  </script>
  <style>
  .van-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  }
  .van-swipe-item img {
    width: 100%;
    height: 200px;
    display: block;
    box-sizing: border-box;
    padding: 30px 60px;
  }
  .van-swipe__indicator{
    background-color: black !important;
  }
  .van-swipe__indicator--active{
    background-color: #1989fa !important;
  }
  </style>
  